import React, { PropTypes } from 'react';
import TweenOne from 'rc-tween-one';

import QueueAnim from 'rc-queue-anim';

import { connect } from 'react-redux';
import { closeMask } from '../action/mask';
import { getChilden } from '../reducers/mask';

import {Icon, Switch, Popover, Button, Modal, Form, Input, message, Row, Col, DatePicker, Cascader,Upload,} from 'antd';

import './less/mask.less';

class Mask extends React.Component {
  static contextTypes = {
      initShow:React.PropTypes.bool,
      closeCallback:React.PropTypes.func
  };

  static defaultProps = {
      initShow:false,
      closeCallback:()=>{}
  };

  constructor(props){
    super(props);
    this.state = {

    }
  }

  render() {
    let _compent =
        <QueueAnim
          animConfig={{opacity:[1, 0],right:[0, '-100%']}}
          duration = {800}
          ease = {['easeOutQuart','easeInSine']}
        >
        {
          this.props.maskStatus?
          [
              <div className="mask-container" key='maskdemo'>
                {this.props.component}
              </div>
          ]:null
        }
        </QueueAnim>
    return _compent;
  }
}

const mapStateToProps = (state) => {
  return {
    maskStatus: state.mask.maskStatus,
    component: state.mask.component
  }
}

export default connect(
  mapStateToProps,
  { closeMask }
)(Mask)
